
<template>
	<div id="my">
		<div class="my_1">
			<img src="../../static/img/my-03.png"/>
			<div class="my_1_1">
				<router-link to='/user/news'><img src="../../static/img/my-01.png"/><span v-if="msgNum > 0" class="dot">•</span></router-link>
				<router-link to='/user/makegold'><img src="../../static/img/my-02.png"/></router-link>
			</div>
			<div class="my_1_2">
				<div class="avatar_box">
					<div class="avatar">
						<img v-if="user.sex==0" src="../../static/img/girl.png"/>
						<img v-else src="../../static/img/boy.png"/>
						<img v-show="user.isMember == 1" src="../../static/img/vip.png"/>
					</div>
				</div>
				<p class="user_name">{{user.username}}</p>
				<router-link to='/user/vip'>VIP开通&gt;</router-link>
				<!--<ul class="money">
					<router-link to='/user/balance'>
						<img src="../../static/img/my-13.png"/>
						<p>余额：{{user.userWallet.balance}}</p>
					</router-link>
					<router-link to='/user/mygold' v-wechat-title='$route.meta.title'>
						<img src="../../static/img/my-14.png"/>
						<p>金币：{{user.userWallet.coins}}</p>
					</router-link>
				</ul>
				<ul class="money">
					<router-link to='/user/balance'>
						<img src="../../static/img/my-13.png"/>
						<p>推广金：{{user.userWallet.balance}}</p>
					</router-link>
					<router-link to='/user/mygold' v-wechat-title='$route.meta.title'>
						<img src="../../static/img/my-14.png"/>
						<p>即将到账：{{user.userWallet.coins}}</p>
					</router-link>
				</ul>-->
			</div>
		</div>
		<!--------钱包相关------------>
		<div class="my_6">
			<router-link to='/user/balance'><p>余额</p><span>{{user.userWallet.balance}}</span></router-link>
			<router-link to='/user/mygold' v-wechat-title='$route.meta.title'><p>金币</p><span>{{user.userWallet.coins}}</span></router-link>
			<router-link to='/user/balance'><p>推广金</p><span>{{user.userWallet.extendsBlance}}</span></router-link>
			<a><p>即将到账</p><span>{{user.userWallet.extendsOwnerComing + user.userWallet.extendsUserComing}}</span></a>
		</div>
		<!--------我的试用------------>
		<div class="my_2">
			<router-link to='/home/myActivity'>
				<div class="my_2_left">
					我的活动<span>（今日申请数：{{user.todayApply}}）</span>
				</div>
				<div class="my_2_right">
					<p>查看更多</p>
					<img src="../../static/img/my-12.png"/>
				</div>
			</router-link>
			<div class="activityList">
				<router-link :to="{path:'/home/myActivity', query: {type: 2}}">
					<img src="../../static/img/my-04.png"/>
					<p>待开奖</p>
					<span v-if="nums.waitPrize > 0">{{nums.waitPrize}}</span>
				</router-link>
				<router-link :to="{path:'/home/myActivity', query: {type: 3}}">
					<img src="../../static/img/my-05.png"/>
					<p>继续抽奖</p>
					<span v-if="nums.continueApply > 0">{{nums.continueApply}}</span>
				</router-link>
				<router-link :to="{path:'/home/myActivity', query: {type: 4}}">
					<img src="../../static/img/my-06.png"/>
					<p>中奖了</p>
					<span v-if="nums.win > 0">{{nums.win}}</span>
				</router-link>
				<router-link :to="{path:'/home/myActivity', query: {type: 7}}">
					<img src="../../static/img/my-07.png"/>
					<p>已取消</p>
				</router-link>
			</div>
		</div>
		<!--------我的拍卖------------>
		<div id="myAuction" class="my_2">
			<router-link to='/home/myAuction'>
				<div class="my_2_left">
					我的拍卖
				</div>
				<div class="my_2_right">
					<p>查看更多</p>
					<img src="../../static/img/my-12.png"/>
				</div>
			</router-link>
			<div class="activityList">
				<router-link :to="{path:'/home/myAuction', query: {type: 2}}">
					<img src="../../static/img/my-18.png"/>
					<p>待开奖</p>
					<span v-if="auctionNums.waitPrize > 0">{{auctionNums.waitPrize}}</span>
				</router-link>
				<router-link :to="{path:'/home/myAuction', query: {type: 3}}">
					<img src="../../static/img/my-19.png"/>
					<p>继续参拍</p>
					<span v-if="auctionNums.continueApply > 0">{{auctionNums.continueApply}}</span>
				</router-link>
				<router-link :to="{path:'/home/myAuction', query: {type: 4}}">
					<img src="../../static/img/my-06.png"/>
					<p>中奖了</p>
					<span v-if="auctionNums.win > 0">{{auctionNums.win}}</span>
				</router-link>
				<router-link :to="{path:'/home/myAuction', query: {type: 7}}">
					<img src="../../static/img/my-07.png"/>
					<p>已流拍</p>
				</router-link>
			</div>
		</div>
		<!---------我的中奖率------------>
		<router-link class="my_3" to="/user/WinningRate">
			<p>我的中奖率</p>
			<img src="../../static/img/my-12.png"/>
		</router-link>
		<!--------我是代言人---------->
		<div class="my_4">
			<div>
				<div class="my_4_title">
					<p>我是代言人<img src="../../static/img/my-11.png" @click="$router.push('/user/spokesman')" /></p>
					<p @click="$router.push('/user/shareUser')">分享赚钱<img src="../../static/img/my-12.png" /></p>
				</div>
				<div @click="$router.push('/user/myFans')" class="my_4_money">
					<div>
						<img src="../../static/img/my-08.png"/>
						<p>奖金<span>￥{{user.userWallet.extendsUserBonus}}</span></p>
					</div>
					<div>
						<img src="../../static/img/my-09.png"/>
						<p>粉丝<span>{{userExtend.count}}</span></p>
					</div>
				</div>
			</div>
			<div to="/user/shareAgent">
				<div class="my_4_title">
					<p>我是微客<img src="../../static/img/my-11.png" @click="$router.push('/user/minivan')" /></p>
					<p @click="$router.push('/user/shareAgent')">推广二维码<img src="../../static/img/my-12.png" /></p>
				</div>
				<div @click="$router.push('/user/myAgent')" class="my_4_money">
					<div>
						<img src="../../static/img/my-08.png"/>
						<p>奖金<span>￥{{user.userWallet.extendsOwnerBonus}}</span></p>
					</div>
					<div>
						<img src="../../static/img/my-09.png"/>
						<p>商家<span>{{busExtend.count}}</span></p>
					</div>
				</div>
			</div>
		</div>
		<!------------账号安全等其他数据------------->
		<div class="my_5">
			<router-link to="/user/account" class="my_5_1">
				<img src="../../static/img/my-15.png"/>
				<p>账户安全</p>
			</router-link>
			<router-link to="/user/help" class="my_5_2">
				<img src="../../static/img/my-16.png"/>
				<p>联系客服</p>
			</router-link>
			<router-link to="/user/feedback" class="my_5_3">
				<img src="../../static/img/my-17.png"/>
				<p>意见反馈</p>
			</router-link>
		</div>
	</div>
</template>

<script>
export default{
	name: 'my',
	data:function(){
		return{
			user: {
				userWallet: {
					balance: ''
				},
				avatarUrl:"../../static/img/girl.png",
			},	// 用户信息
			userExtend: {},	// 推广用户
			busExtend: {},	// 推广商家
			nums: {},	// 各状态活动数量
			auctionNums:{}, // 各状态拍卖数量
			msgNum: 0, // 未读消息数量
		}
	},
	methods: {
		// -------获取用户信息 --------
		getUserInfo: function(){
			var _this = this;
			this.$axios.post("/user/info/getUserInfo").then(function(res){
				var data = res.data;
			    if(data.message == "succ"){
			    	_this.user = data.result;
			    	if(_this.user.sex==0){
			    		_this.user.avatarUrl = "../../static/img/girl.png"
			    	}else{
			    		_this.user.avatarUrl = "../../static/img/boy.png"
			    	}
			    }else{
			    	_this.$alert(data.result);
			    }
			}
			).catch(function (error) {
				console.log(error);
			});
		},
		// -------获取用户推广信息 --------
		getExtendsNum: function(){
			var _this = this;
			this.$axios.post("/user/extends/getUserExtends").then(function(res){
				var data = res.data;
			    if(data.message == "succ"){
			    	if(data.result.length > 0){
			    		if(data.result[0].type == 1){
				    		_this.busExtend = data.result[0];
				    		if(data.result.length > 1){
				    			_this.userExtend = data.result[1];
				    		}
				    	}else{
				    		if(data.result.length > 1){
				    			_this.busExtend = data.result[1];
				    		}
				    		_this.userExtend = data.result[0];
				    	}
			    	}
			    }else{
			    	_this.$alert(data.result);
			    }
			}).catch(function (error) {
				console.log(error);
			});
		},
		// -------获取用户各状态活动数量 --------
		getNumByTaskStatus: function(){
			var _this = this;
			this.$axios.post("/user/taskSchedule/getMyApplyNum").then(function(res){
				var data = res.data;
			    if(data.message == "succ"){
			    	_this.nums = data.result;
			    }else{
			    	_this.$alert(data.result);
			    }
			}
			).catch(function (error) {
				console.log(error);
			});
		},
		// -------获取用户各状态拍卖数量 --------
		getAuctionNums: function(){
			var _this = this;
			this.$axios.post("/user/auctionSchedule/getMyAuction").then(function(res){
				var data = res.data;
			    if(data.message == "succ"){
			    	_this.auctionNums = data.result;
			    }else{
			    	_this.$alert(data.result);
			    }
			}
			).catch(function (error) {
				console.log(error);
			});
		},
		// -------获取未读消息数量 --------
		getMsgNum: function(){
			var _this = this;
			this.$axios.post("/user/message/getNotReadCount").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.msgNum = data.result;
				}else{
					console.log(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
	},
	created: function(){
		this.getUserInfo();
		this.getExtendsNum();
		this.getNumByTaskStatus();
		this.getMsgNum();
		this.getAuctionNums();
	},
}
</script>

<style scoped>
.dot{
    color: red;
    font-size: 3rem;
    position: relative;
    bottom: 0.8rem;
    right: 0.6rem;
}
.my_1{
	position: relative;
	
}
.my_1>img{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 10rem;
	display: block;
}
.my_1_1{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	box-sizing: border-box;
	position: relative;
	z-index: 3;
}
.my_1_1 img{
	height: 2rem;
}
.my_1_2{
	width: 90%;
	margin: 0 auto;
	background: linear-gradient(to bottom,#FFFEE4,#FFFFFF);
	border-radius: 10px;
	height: 9rem;
	/*margin-top: 1rem;*/
	position: relative;
	padding-top: 4rem;
	box-sizing: border-box;
	box-shadow: 0 5px 6px rgba(229,208,163,0.9);
}
.avatar_box{
	width: 100%;
	position: absolute;
	top: -3rem;
}
.avatar{
	width: 6rem;
	height: 6rem;
	margin: 0 auto;
	position: relative;
	border-radius: 50%;
	border: 2px solid rgba(255,251,130,0.7);
}
.avatar img:first-child{
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
.avatar img:last-child{
	height: 2rem;
	display: block;
	position: absolute;
	bottom: -0.3rem;
	right: -0.5rem;
}
.user_name{
	font-size: 1.2rem;
	font-weight: 600;
	color: #4F4F4F;
	text-align: center;
}
.my_1_2>a{
	display: block;
	width: 7rem;
	margin: 0 auto;
	border-radius: 50px;
	background-color: #858585;
	color: #FFEB78;
	text-align: center;
	font-size: 1rem;
	padding: 0.3rem 0;
	margin-top: 0.3rem;
}
.my_1_2 .money{
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 3rem;
	background-color: #FFC342;
	color: #844400;
	display: flex;
	border-radius: 0 0 10px 10px;
}
.my_1_2 .money a{
	height: 100%;
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
}
.my_1_2 .money a:first-child{
	border-right: 1px solid #FFFFFF;
}
.my_1_2 .money a img{
	height: 1.4rem;
	display: block;
	margin-right: 0.5rem;
}
/*------钱包相关---------*/
.my_6{
	width: 100%;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 1rem 0;
	margin-top: 1.2rem;
}
.my_6 a{
	width: 25%;
	border-right: 1px solid #EEEEEE;
	padding: 0.2rem 0;
}
.my_6 a p{
	text-align: center;
	margin-bottom: 0.5rem;
}
.my_6 a span{
	display: block;
	width: 100%;
	text-align: center;
	color: #FF6565;
	font-size: 1.4rem;
}
/*------我的活动----------*/
.my_2{
	background-color: #fff;
	padding: 0 1rem;
	margin-top: 0.5rem;
}
.my_2>a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3.4rem;
	border-bottom: 1px solid #EEEEEE;
}
.my_2>a .my_2_left{
	font-size: 1.2rem;
	color: #4F4F4F;
	white-space: nowrap;
}
.my_2>a .my_2_left span{
	color: #787878;
}
.my_2>a .my_2_right{
	font-size: 1.2rem;
	color: #787878;
	display: flex;
	align-items: center;
}
.my_2>a .my_2_right p{
	white-space: nowrap;
}
.my_2>a .my_2_right img{
	height: 1.2rem;
	display: block;
	margin-left: 0.5rem;
}
.my_2 .activityList{
	display: flex;
}
.my_2 .activityList a{
	width: 25%;
	padding: 1rem 0;
	position: relative;
}
.my_2 .activityList a img{
	height: 2.5rem;
	display: block;
	margin: 0 auto;
	margin-bottom: 0.5rem;
}
.my_2 .activityList a p{
	text-align: center;
}
.my_2 .activityList a span{
	position: absolute;
	top: 0.8rem;
	right: 1.8rem;
	min-width: 1.2rem;
	height: 1.2rem;
	background-color: #FF010C;
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 1rem;
	text-align: center;
	line-height: 1.2rem;
}
#myAuction{
	margin-top: 0.5rem;
}
/*------我的中奖率------------*/
.my_3{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	height: 3.4rem;
	background-color: #fff;
	margin-top: 0.5rem;
}
.my_3 p{
	color: #4F4F4F;
	font-size: 1.2rem;
	white-space: nowrap;
}
.my_3 img{
	height: 1.2rem;
	display: block;
}
/*--------推广----------*/
.my_4>div{
	background-color: #fff;
	margin-top: 0.5rem;
	display: block;
}
.my_4>div .my_4_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	box-sizing: border-box;
	height: 3.4rem;
	border-bottom: 1px solid #EEEEEE;
}
.my_4>div .my_4_title img{
	height: 1.2rem;
	box-sizing: border-box;
}
.my_4>div .my_4_title p:first-child{
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	color: #4F4F4F;
	white-space: nowrap;
}
.my_4>div .my_4_title p:first-child img{
	margin-left: 0.5rem;
}
.my_4>div .my_4_title p:last-child{
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	color: #787878;
	white-space: nowrap;
}
.my_4>div .my_4_title p:last-child img{
	margin-left: 0.5rem;
}
.my_4_money{
	display: flex;
}
.my_4_money>div{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 3.6rem;
}
.my_4_money>div:first-child{
	border-right: 1px solid #EEEEEE;
}
.my_4_money>div img{
	height: 1.2rem;
	display: block;
	margin-right: 0.5rem;
}
.my_4_money>div p{
	font-size: 1.2rem;
	color: #4F4F4F;
}
.my_4_money>div p span{
	color: #FF6565;
	margin-left: 0.5rem;
}
/*---------账号安全等其他数据------------*/
.my_5{
	display: flex;
	margin-top: 0.5rem;
	padding: 1rem;
	padding-bottom: 6.5rem;
	box-sizing: border-box;
	background-color: #fff;
	/*margin-bottom: 5.5rem;*/
}
.my_5 a{
	width: 32%;
	margin-right: 2%;
	height: 6rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.my_5 a:last-child{
	margin-right: 0;
}
.my_5_1{
	background-color: #F1FFEE;
	color: #76C565;
}
.my_5_2{
	background-color: #FFFFF0;
	color: #FFBF3A;
}
.my_5_3{
	background-color: #FFF4F3;
	color: #FE6664;
}
.my_5 a img{
	height: 2.5rem;
	display: block;
	margin: 0 auto;
	margin-bottom: 0.5rem;
}
</style>
